<template>
    <div class="container">
        <div style="padding-top: 20px;">
            <el-breadcrumb separator="/" class="breadcrumb">
                <el-breadcrumb-item>
                    <router-link to="/user/location">党建地点</router-link>
                </el-breadcrumb-item>
                <el-breadcrumb-item>党建地点详细信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card class="main-card">
            <div class="content">
                <div class="location-detail">
                    <el-card class="image-card">
                        <img
                            v-if="locationDetails.photo"
                            :src="locationDetails.photo"
                            alt="Location Image"
                            class="location-image"
                        />
                    </el-card>

                    <div class="location-info">
                        <h2>{{ locationDetails.name }}</h2>
                        <p><strong>预约人数:</strong> {{ locationDetails.balance }}</p>
                        <p><strong>类型:</strong> {{ locationDetails.type }}</p>
                    </div>

                    <div class="location-description">
                        <h3>详细信息</h3>
                        <p class="description-text">{{ locationDetails.content }}</p>
                        <el-button type="primary" @click="openBookingDialog">预约</el-button> <!-- 预约按钮 -->
                    </div>
                </div>

                <div class="recommendations">
                    <h3>系统推荐</h3>
                    <el-row :gutter="20" class="recommendation-list">
                        <el-col
                            v-for="location in recommendedLocations"
                            :key="location.id"
                            :span="24"
                            class="recommendation-item"
                        >
                            <div
                                class="recommended-content"
                                @click="navigateToLocation(location.id, location.name)"
                            >
                                <img
                                    :src="location.photo"
                                    alt="推荐地点"
                                    class="recommendation-image"
                                />
                                <div class="recommendation-name">{{ location.name }}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-card>

        <!-- 预约对话框 -->
        <el-dialog title="预约地点" :visible.sync="dialogVisible">
            <el-form :model="bookingForm" @submit.native.prevent="submitBooking">
                <el-form-item label="姓名" :rules="[{ required: true, message: '请输入您的姓名', trigger: 'blur' }]">
                    <el-input v-model="bookingForm.username"></el-input>
                </el-form-item>
                <el-form-item label="电话" :rules="[{ required: true, message: '请输入您的电话', trigger: 'blur' }]">
                    <el-input v-model="bookingForm.userPhone"></el-input>
                </el-form-item>
                <el-form-item label="人数" :rules="[{ required: true, message: '请输入预约人数', trigger: 'blur' }]">
                    <el-input v-model="bookingForm.number"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" native-type="submit">提交预约</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { selectByNameService, LocationListService } from '@/api/location.js';
import { createBookingService } from '@/api/booking.js'; // 假设你有一个预约的 API 服务

export default {
    data() {
        return {
            locationId: this.$route.params.locationId,
            locationName: this.$route.params.locationName,
            locationDetails: {},
            allLocations: [],
            recommendedLocations: [],
            dialogVisible: false,
            bookingForm: {
                username: '',
                userPhone: '',
                number: '',
            },
        };
    },
    created() {
        this.fetchLocationDetails(); // 获取第一条地点信息
        this.fetchAllLocations(); // 获取推荐地点
    },
    watch: {
        '$route.params': {
            immediate: true, // 创建组件时立即触发
            handler() {
                this.locationId = this.$route.params.locationId; // 更新当前 ID
                this.locationName = this.$route.params.locationName; // 更新当前名称
                this.fetchLocationDetails(); // 根据新参数获取详细信息
            },
        },
    },
    methods: {
        async fetchLocationDetails() {
            try {
                const response = await selectByNameService(this.locationName);
                if (response && response.data && response.data.length) {
                    this.locationDetails = response.data[0];
                } else {
                    console.error('No data returned for location.');
                }
            } catch (error) {
                console.error('Error fetching location details:', error);
            }
        },
        async fetchAllLocations() {
            try {
                const response = await LocationListService({ page: 1, size: 10 });
                this.allLocations = response.data.list;
                this.getRecommendedLocations();
            } catch (error) {
                console.error('Error fetching all locations:', error);
            }
        },
        getRecommendedLocations() {
            const sortedLocations = this.allLocations.sort((a, b) => b.number - a.number);
            this.recommendedLocations = sortedLocations.slice(0, 4);
        },
        openBookingDialog() {
            this.dialogVisible = true; // 打开预约对话框
        },
        async submitBooking() {
            try {
                // 可以将表单数据发送到后端
                const bookingData = {
                    locationId: this.locationId,
                    locationName: this.locationDetails.name,
                    locationPhoto: this.locationDetails.photo,
                    ...this.bookingForm, // 展开表单数据
                };
                await createBookingService(bookingData);
                this.$message.success('预约成功!');
                this.dialogVisible = false; // 关闭对话框
                this.resetBookingForm(); // 重置表单
            } catch (error) {
                console.error('Error submitting booking:', error);
                this.$message.error('预约失败，请重试.');
            }
        },
        resetBookingForm() {
            this.bookingForm.username = '';
            this.bookingForm.userPhone = '';
            this.bookingForm.number = '';
        },
        navigateToLocation(id, name) {
            this.$router.push({ name: 'LocationDetail', params: { locationId: id, locationName: name } });
        },
    },
};
</script>

<style scoped>
/* 其余样式保持不变 */
</style>
